<template>
  <sky-base-page ref="basePageRef" :api-obj="qly.api.user.getuserlist"
                 type="data" refresherEnabled padding="8rpx 0"
                 :params="params" :auto-load="false" @reload="reload">
    <template #header>
      <view class="location">
        <view class="left-text" @tap="openCityPicker">
          <up-icon name="map" color="#2979ff" size="22"></up-icon>
          {{ location || '请选择城市' }}
        </view>
        <view class="filter-text" @tap="openSearch">筛选</view>
      </view>
      <view class="search-box">
        <up-search placeholder="请输入关键字" v-model="params.text" :showAction="false" @clear="getUserList"
        ></up-search>
        <up-icon name="search" color="#2979ff" size="28" @tap="getUserList"></up-icon>
      </view>
    </template>
    <template #default="{dataInfo}">
      <swiper-list ref="swiperListRef" :params="params"/>

      <sky-customer-card v-for="(item,index) in dataInfo" :key="index"
                         :dataInfo="item" :pid="item.id"/>
      <!--      @tap="toCustomerInfo(item.id)"-->
      <qly-empty v-if="dataInfo.length === 0"/>
    </template>
  </sky-base-page>

  <!--  选择省市区-->
  <qly-city-picker :default-value="defaultValue" :mask-close-able="true" @confirm="confirm" @cancel="cancel"
                   :visible="visible"/>

  <!--  搜索-->
  <sky-search ref="qlySearchRef" v-model="params" @search="getUserList"/>
</template>
<script setup>
import swiperList from './components/swiper.vue'

const swiperListRef = ref()
const location = qly.storage.storageRef('location')
const locationData = qly.storage.storageRef('locationData')
const visible = ref(false)
const basePageRef = ref()
const qlySearchRef = ref()
const params = ref({
  user_type: '',
  text: '',
  province: '',
  city: '',
  district: '',
})
const defaultValue = computed(() => {
  if(!locationData.value){
    return []
  }
  return [locationData.value.province, locationData.value.city, locationData.value.district]
})

// 获取列表数据
const getUserList = () => {
  console.log('params',params.value)
  basePageRef.value.refresh()
}

const getLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    isHighAccuracy: true,
    accuracy: 'best',
    success: function (res) {
      console.log('当前位置的经度：' + res.longitude);
      console.log('当前位置的纬度：' + res.latitude);
      getLocationByTencentAPI(res)
    },
    fail: function (err) {
      console.log('获取位置信息失败：' + JSON.stringify(err));
    }
  });
}

// 经纬度转省市区
const getLocationByTencentAPI = async ({latitude, longitude}) => {
  const data = {
    latitude: Number(latitude.toFixed(6)),
    longitude: Number(longitude.toFixed(6))
  }
  const res = await qly.api.user.getLocationByTencentAPI(data)
  if (res.code === 1) {
    if (!location.value) {
      location.value = res.data.district
      locationData.value = {
        province: res.data.province,
        city: res.data.city,
        district: res.data.district
      }
      params.value = {
        ...params.value,
        province: res.data.province,
        city: res.data.city,
        district: res.data.district
      }
      await nextTick()
      getUserList()
    }

  } else {
    qly.dialog.apiError(res).catch()
  }
}

const openCityPicker = () => {
  visible.value = true
}

const cancel = () => {
  visible.value = false
}
// 确认省市区
const confirm = (val) => {
  console.log('val', val)
  params.value.province = val.provinceName
  params.value.city = val.cityName
  params.value.district = val.areaName
  location.value = val.areaName
  locationData.value = {
    province: val.provinceName,
    city: val.cityName,
    district: val.areaName
  }
  getUserList()
  visible.value = false
}

const openSearch = () => {
  qlySearchRef.value.open()
}

// 下拉刷新
const reload = () => {
  params.value.province=locationData.value.province
  params.value.city=locationData.value.city
  params.value.district=locationData.value.district
  swiperListRef.value.refresh()
}
onShow(() => {
  console.log('onShow')
  getLocation()
})

</script>
<style scoped lang="scss">
.location {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24rpx;
  box-sizing: border-box;
  background: #fff;
  gap: 24rpx;

  .left-text {
    display: flex;
    align-items: center;
    gap: 4rpx;
  }

  .left-box {
    flex: 1;
  }
}

.search-box {
  display: flex;
  align-items: center;
  gap: 4rpx;
  background-color: #fff;
  padding: 0 24rpx 16rpx;
}

.filter-text {
  color: #2979ff;
}
</style>
